import React from 'react'
import { Icons } from '@/models/Icons'
import { Wrapper } from './style'
import { Link } from 'react-router-dom'
import LazyLoad from "react-lazyload";
import tv from '@/assets/images/tv.png';
import {baseURL} from '@/api/config';

interface IconsItemProps {
    icons: Icons;
    showStatistics: boolean
}

const IconsItem :React.FC<IconsItemProps> = (props) => {
    const {
      icons,
      showStatistics
    } = props
  return (
    <Wrapper>
        <Link to={"/video/av"}>
        {
          <div className="icon-item">
                
            <LazyLoad placeholder={
              <img width="100%" height="100%"
              src={tv}
               />
              }>
              <img src={icons.icon} 
                onLoad={(e) => e.currentTarget.style.opacity = "1"}
              />
              <div className='icon-title'>{icons.title}</div>
              </LazyLoad>
              
          </div>
        }    
        </Link>
    </Wrapper>
  )
}

export default IconsItem
